<!-- 运输统计 -->
<template>
  <basic-container>
    <!-- 搜索框-->
    <el-form
      :inline="true"
      ref="searchForm"
      :model="searchForm"
      @keyup.enter.native="init()"
      @submit.native.prevent
    >
      <el-form-item prop="date">
        <el-date-picker
          v-model="searchForm.date"
          type="daterange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="init()" size="small">查询</el-button>
        <el-button @click="resetSearch()" size="small">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="content" v-loading="loading">
      <div class="box">
        <div id="pieOne" class="pie"></div>
      </div>
      <div class="box">
        <div id="pieTwo" class="pie"></div>
      </div>
      <div class="box">
        <div id="pieThree" class="pie"></div>
      </div>
    </div>
  </basic-container>
</template>

<script>
import { getTransportationStatistics } from "@/api/monitor/transportMonitoring";
export default {
  data() {
    return {
      searchForm: {
        date: [],
        pieOne: null,
        pieTwo: null,
        pieThree: null,
      },
      loading: false,
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          // 把选择的第一个日期赋值给一个变量。
          this.choiceDate = minDate.getTime();
          // 如何你选择了两个日期了，就把那个变量置空
          if (maxDate) this.choiceDate = "";
        },
        disabledDate: (time) => {
          // 如何选择了一个日期
          if (this.choiceDate) {
            // 7天的时间戳
            const one = 7 * 24 * 3600 * 1000;
            // 当前日期 - one = 7天之前
            const minTime = this.choiceDate - one;
            // 当前日期 + one = 7天之后
            const maxTime = this.choiceDate + one;
            return (
              time.getTime() < minTime ||
              time.getTime() > maxTime ||
              // 限制不能选择今天及以后
              time.getTime() > Date.now()
            );
          } else {
            // 如果没有选择日期，就要限制不能选择今天及以后
            return time.getTime() > Date.now();
          }
        },
      },
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.searchForm.date = [
      this.moment().subtract(7, "days").format("YYYY-MM-DD HH:mm:ss"),
      this.moment().format("YYYY-MM-DD HH:mm:ss"),
    ];
    this.init();
    window.addEventListener("resize", this.resize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resize);
  },
  destroyed() {
    window.removeEventListener("resize", this.resize);
  },
  methods: {
    resize() {
      this.pieOne.resize();
      this.pieTwo.resize();
      this.pieThree.resize();
    },
    init() {
      this.loading = true;
      this.pieOne = this.echarts.init(document.getElementById("pieOne"));
      this.pieTwo = this.echarts.init(document.getElementById("pieTwo"));
      this.pieThree = this.echarts.init(document.getElementById("pieThree"));
      getTransportationStatistics({
        start: this.searchForm.date ? this.searchForm.date[0] : "",
        end: this.searchForm.date ? this.searchForm.date[1] : "",
      }).then(
        ({ data }) => {
          this.loading = false;
          this.pieOne.setOption({
            title: {
              text: "运单类型统计",
              bottom: "0",
              left: "center",
            },
            tooltip: {
              trigger: "item",
            },
            series: [
              {
                type: "pie",
                emptyCircleStyle: {
                  color: "#fff",
                  borderWidth: "2",
                  borderColor: "#eee",
                },
                radius: "60%",
                data: data.data.waybillTypeStatistics,
              },
            ],
          });
          this.pieTwo.setOption({
            title: {
              text: "运单异常统计",
              bottom: "0",
              left: "center",
            },
            tooltip: {
              trigger: "item",
            },
            series: [
              {
                type: "pie",
                emptyCircleStyle: {
                  color: "#fff",
                  borderWidth: "2",
                  borderColor: "#eee",
                },
                radius: "60%",
                data: data.data.transportationAnomalyStatistics,
              },
            ],
          });
          this.pieThree.setOption({
            title: {
              text: "承运商订单统计",
              bottom: "0",
              left: "center",
            },
            tooltip: {
              trigger: "item",
            },
            series: [
              {
                type: "pie",
                emptyCircleStyle: {
                  color: "#fff",
                  borderWidth: "2",
                  borderColor: "#eee",
                },
                radius: "60%",
                data: data.data.carrierOrderStatistics,
              },
            ],
          });
        },
        (error) => {
          window.console.log(error);
          this.loading = false;
        }
      );
    },
    resetSearch() {
      this.searchForm.date = [];
      this.init();
    },
  },
};
</script>

s
<style lang="scss" scoped>
.content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .box {
    width: 33.33%;
    height: 0;
    padding-bottom: 33.33%;
    position: relative;
    .pie {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
